<template>
	<view
		class="page-wrap"
		:data-theme="theme"
		:class="[theme,traditionList[pattern].name]"
		:style="globalColor.style"
		:data-pattern="pattern"
		:data-tradition="traditionList[pattern].name"
	>
		<HeadCustom
			ref="HeadCustom"
			:isCircle="menuCode == 'COMPANY_MP' || !isCompony ? true : false"
			:isBlur="menuCode == 'COMPANY_MP' || !isCompony ? false : true"
			:isSpace="menuCode == 'COMPANY_MP' || !isCompony ? false : true"
			linkId="usr1a2tg0v95hb4o"
			:linkData="linkData"
			:isBack="isBack"
		></HeadCustom>
		<template v-if="pageStatus == 'data'">
			<template v-if="menuCode == 'COMPANY_MP' || !isCompony">
				<DetailHead
					ref="DetailHead"
					:traditionList="traditionList"
					:pattern.sync="pattern"
					:isPattern="isPattern"
					:detail="detail"
					:isMine="isMine"
				/>
				<view class="bg">
					<DetailUser
						:pattern="pattern"
						:isMine="isMine"
						:detail.sync="detail"
						:company="companyInfo"
						:isCompony="isCompony"
						:disposition="traditionList[pattern]"
						@login="login"
						@follow="setFollow($event, 'info')"
						@open="openApp"
						@card="showModalCard"
					/>
					<!-- 动态 -->
					<DetailDynamic
						ref="DetailDynamic"
						:isMine="isMine"
						:cardId="cardId"
						@login="login"
						@follow="setFollow($event, 'dynamic')"
					/>
					<!-- #ifdef MP -->
					<view class="btn-card-space" :class="isCompony ? 'compony-card-space' : ''">
						<view
							class="btn-card-fixed fboxRow Ycenter Xcenter bg-linear"
							@tap.stop="goPage"
							v-if="!isLogin"
						>
							制作我的名片
						</view>
						<view
							class="btn-card-fixed fboxRow Ycenter Xcenter bg-linear"
							@tap.stop="goPage"
							v-else-if="isMine"
						>
							编辑我的名片
						</view>
						<view
							class="btn-card-fixed fboxRow Ycenter Xcenter bg-linear"
							@tap.stop="goPage"
							v-else
						>
							查看我的名片
						</view>
					</view>
					<!-- #endif -->
				</view>
			</template>
			<template v-else>
				<EnterpriseHead :detail.sync="companyInfo" @login="login" />
				<view class="line"></view>
				<!-- 企业模块 -->
				<DetailCollection
					ref="DetailCollection"
					:companyId="companyInfo.companyId"
					:menuCode="menuCode"
				/>
			</template>
		</template>
		<template v-if="pageStatus == 'err'">
			<!-- 用户被禁 -->
			<view class="not-wrap fboxCol Ycenter Xcenter">
				<view class="icon">
					<u-icon name="info-circle-fill" size="80rpx" color="red"></u-icon>
				</view>
				<view class="font32 tit">该用户已被禁用</view>
				<view class="btn fboxRow Ycenter Xcenter bg-linear" @tap="back">返回</view>
			</view>
		</template>
		<not-login ref="notLogin" :bottom="isCompony ? '160rpx' : '60rpx'" />
		<!-- 商务名片菜单  -->
		<BottomTabbar
			v-if="isCompony"
			:company="companyInfo"
			:userId="this.detail.cardId"
			:active.sync="menuCode"
			type="card"
		/>
		<ModalCard
			:pramas="pramas"
			:detail="detail"
			:innerData="traditionList[pattern]"
			:pattern="pattern"
			:isShow.sync="isModalCard"
		/>
		<view class="canvas-fixed" id="canvas-fixed">
			<canvas
				id="firstCanvas"
				style="width: 500px; height: 400px"
				class="firstCanvas"
				canvas-id="firstCanvas"
			></canvas>
		</view>
	</view>
</template>

<script>
import ModalCard from '../components/modal-card.vue';
import DetailHead from '../components/detail-head.vue';
import DetailUser from '../components/detail-user.vue';
import DetailDynamic from '../components/detail-dynamic.vue';
import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue'

import DetailCollection from '../components/detail-collection.vue';
import EnterpriseHead from '../components/enterprise-head.vue'

import { throttle, getRequest } from '@/static/js/common.js';
import { getCard, getVisitorIsRepresent, companyCardPreview } from '@/api/card.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { traditionList } from '../components/card-tradition.js'

export default {
	components: {
		DetailHead,
		DetailUser,
		DetailDynamic,
		DetailCollection,
		ModalCard,
		EnterpriseHead,
		BottomTabbar
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isPoster: false,
			cardId: '', //vip00000000908',
			detail: {},
			isCompony: false,
			companyInfo: {},
			menuCode: '',
			isMine: false,
			isPattern: true,
			linkData: { id: '' },
			pageStatus: 'loading',
			pattern: '0', // 1
			isModalCard: false,
			shareImg: '',
			// 传统名片配置图片和颜色
			traditionList: traditionList,
			traditionName: '',
			// 记录URL传递过来的参数
			// 0 预览（编辑我的名片），1查看别人名片-未登录（开始制作我的名片）2查看别人名片-登录（查看我的名片） 3 查看自己名片
			pramas: {
				// id: '', // 用户ID
				// cardId: '', // 用户ID
				// scene: '', // 扫码
				// pattern: '', // 名片样式类型参数
				// styleId: '', // 名片样式
				// type: '', // 是否预览
				// menuCode: '', // 商务名片tab参数
				// q: '', // 太阳扫码
				// benwu: '', // app传递参数
				// organisationId: '', // 公司ID
				// style: '' // 0 个人名片 || 1 商务名片
			},
			isLogin: false,
			isBack: true,
			shareLoading:false
		}

	},
	watch: {
		pattern: {
			handler(val) {
				// if(val){
				// 	const index = val-1
				// 	this.traditionName = this.traditionList[index].name
				// }
			},
			deep: true,
			immediate: true
		}
	},
	onLoad(option) {
		this.pageStatus = 'loading'

		// URL传递过来的参数
		this.pramas = option

		// 传递名片类型样式，禁止滑动，展示名片
		if (option && option.styleId) {
			this.isPattern = false;
		}
		if (option && option.pattern) {
			if (option.pattern < 9) {
				this.pattern = option.pattern > 0 ? Number(option.pattern) - 1 : 0;
			}
		}
		if (option && option.isBack) {
			this.isBack = false;
		}
		// 名片ID或者用户ID
		if (option && (option.id || option.cardId || option.scene)) {
			this.cardId = option.id || option.cardId || option.scene

			this.linkData = { id: this.cardId }

			this.getInit()

		}
		if (option.q) {
			//微信扫描二维码扫码识别
			const q = decodeURIComponent(option.q) || ''

			const cardId = getRequest(q, 'id');
			this.cardId = cardId

			this.getInit();
		}
		// 商务名片菜单默认值
		if (option && option.menuCode) {
			this.menuCode = option.menuCode

		}
		// app传递benwu参数
		if (option && option.benwu) {
			const benwu = utf8to16(base64decode(option.benwu));
			getApp().globalData.statusBarHeight = getRequest(benwu, 'statusBarHeight');
		}
	},
	onShow() {
		// 是否是自己
		const userTemp = getApp().globalData.userTemp

		this.isMine = userTemp.memberId == this.cardId;
		const { bw_params } = getApp().getBWData(['bw_params']);
		if (bw_params && bw_params.access_token) {
			this.isLogin = true

		}
	},
	methods: {
		goPage() {
			if (this.pramas.type && this.pramas.type == 'view') {
				uni.navigateBack()

			} else {
				const { bw_params, bw_user_temp } = getApp().getBWData([
					'bw_params',
					'bw_user_temp'
				]);
				if (bw_params && bw_params.access_token) {
					if (bw_user_temp.memberId == this.detail.cardId) {
						this.$pageTo('/cardMsg');
					} else {
						this.$pageTo('/CardDetail?id=' + bw_user_temp.memberId);
					}
				} else {
					this.$pageTo('/mine/mobile');
				}
			}
		},
		showModalCard() {
			this.isModalCard = true

		},
		// 返回
		back() {
			this.$refs.HeadCustom.backTap();
		},
		openApp() {
			this.$refs.HeadCustom.openApp()

		},
		// 弹出登录
		login() {
			this.$refs.notLogin.openLogin({
				show: true,
				position: 'center'
			})

		},
		// 设置关注状态
		setFollow(val, type) {
			if (type == 'info') {
				this.$refs.DetailDynamic.setFollow(val)

			} else {
				this.detail.follow = val

			}
		},
		// 初始化，获取是否展示商务名片
		getInit() {
			// 分享名片样式强制修改样式
			if (this.pramas.organisationId && this.pramas.style == 1) {
				this.isCompony = true

				// 商务名片
				this.getDetail(this.pramas.organisationId)

			} else {
				if (this.pramas.style == 0) {
					// 个人名片
					this.getDetail()

				} else {
					getVisitorIsRepresent({ cardId: this.cardId }).then((res) => {
						if (res.data) {
							this.isCompony = res.data.flag;
							this.getDetail(res.data.companyId)

						}
					});
				}
			}
		},
		// 名片详情
		getDetail(companyId) {
			const reqData = { cardId: this.cardId }

			if (companyId) {
				reqData.companyId = companyId;
			}
			if (this.pramas.styleId) {
				reqData.style = this.pramas.style;
				reqData.styleId = this.pramas.styleId;
			}
			getCard(reqData)
				.then((res) => {
					this.pageStatus = 'data'
					if (res.data) {
						if (this.pramas.styleId) {
							res.data.styleId = this.pramas.styleId;
							if (this.pramas.styleId == 'STYLE_IMAGE') {
								this.pattern = 2;
							}
						} else if (res.data.styleId == 'STYLE_IMAGE') {
							this.pattern = 2

						}
						this.detail = res.data
						uni.setNavigationBarTitle({
							title: `${res.data.realName}-${
								res.data.organisationId ? '商务名片' : '个人名片'
							}`
						});
						this.wxSave((e)=>{
							console.log(e)
						})
					}
				})
				.catch((err) => {
					this.pageStatus = 'err';
				})

			if (companyId) {
				companyCardPreview({ companyId }).then((res) => {
					this.companyInfo = res.data;
					// 3.5.0 需求修改 增加名片板块
					res.data.list.unshift({
						companyId: res.data.companyId,
						menuCode: 'COMPANY_MP',
						menuIcon: 'https://ebc-prod.cdn.benwunet.com/uni-static/card/icon-nav.png',
						menuName: '名片'
					});
					this.menuCode = this.menuCode ? this.menuCode : res.data.list[0].menuCode

				})
			}
		},
		// 小程序分享图片
		async wxSave(callback) {
			const disposition = {
				iconPhone:'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-1.png',
				iconAddress:'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-2.png',
				iconAuth:'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-3.png',
				logo: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/logo-min.png'
			};
			const tradition = this.traditionList[this.pattern];
			const isLeft = tradition.position == 'right';
			let url = '';
			if (this.detail.styleId == 'STYLE_IMAGE') {
				callback(this.detail.imagePhoto);
			} else {
				try {
					if (!this.detail.avatar && !this.detail.imagePhoto) {
						return
					}
					const item = this.detail;
					const avatar = (await uni.getImageInfo({ src: this.detail.avatar || this.detail.imagePhoto }))[1]
					// const avatar = (await uni.getImageInfo({ src: this.detail.avatar || this.detail.imagePhoto }))[1].path

					const bg = (await uni.getImageInfo({ src: tradition.bg }))[1].path

					const bgRipple = (await uni.getImageInfo({ src: tradition.bgRipple }))[1].path;
					let logo = ''

					// 公司logo
					if (this.detail.companyLogo) {
						logo = (await uni.getImageInfo({ src: this.detail.companyLogo }))[1].path;
					}
					const bgCon = (await uni.getImageInfo({ src: isLeft ? tradition.bgCon : tradition.bgConR }))[1].path
					const icon1 = (await uni.getImageInfo({ src: disposition.iconPhone }))[1].path
					const icon2 = (await uni.getImageInfo({ src: disposition.iconAddress }))[1].path
					const icon3 = (await uni.getImageInfo({ src: disposition.iconAuth }))[1].path
					const bgBlock = (await uni.getImageInfo({ src: tradition.bgBlock }))[1].path;
					const _this = this

					let ctx = uni.createCanvasContext('firstCanvas', this);
					const ml = 14; // 外部左边距离 初始 16
					const mt = 24; // 外部顶部距离
					const pl = 16; // 内容左边距离 初始 16
					ctx.fillStyle = '#fff';
					ctx.clearRect(0, 0, 500, 400)

					ctx.fillRect(0, 0, 500, 400);
					ctx.drawImage(bg, 0, 0, 500, 400);
					let companyName = item.firstCompanyName || item.companyName || ''

					if (companyName) {
						companyName = companyName.length <= 10 ? companyName : companyName.slice(0, 10) + '...';
					}
					// drawImage 顶部位置开始算
					// fillText 底部位置开始算
					
					console.log(avatar)
					
					if (isLeft) {
						ctx.textAlign = 'left';
						// 左边位置
						if(avatar.width < avatar.height){
							const aTop = (avatar.height-avatar.width)/2
							ctx.drawImage(avatar.path,0, aTop, avatar.width, avatar.width, ml + 190, mt, 280, 280)
						}else{
							const aTop = (avatar.width-avatar.height)/2
							ctx.drawImage(avatar.path, aTop, 0, avatar.height, avatar.height, ml + 190, mt, 280, 280)
						}
						// ctx.drawImage(avatar.path, ml + 190, mt, 280, 280);
						ctx.drawImage(bgCon, ml + 0, mt, 299, 280);
						// logo,公司名称
						ctx.fillStyle = '#FFF9F3';
						ctx.setFontSize(14);
						if (logo) {
							ctx.drawImage(logo, ml + pl, mt + 18, 14, 14);
							ctx.fillText(companyName, ml + pl + 16, mt + 31);
						} else {
							ctx.fillText(companyName, ml + pl, mt + 31)

						}
						ctx.stroke();
						// 名字和职位
						ctx.drawImage(bgBlock, ml, mt + 54, 248, 88);
						ctx.setFontSize(28)

						ctx.fillText(item.realName, ml + pl, mt + 88)

						if (item.isAuth) {
							//实名
							ctx.drawImage(
								icon3,
								ml + pl + ctx.measureText(item.realName).width + 4,
								mt + 88 - 18,
								23,
								20
							);
						}
						ctx.stroke();
						if (item.firstPositionName) {
							ctx.setFontSize(16)

							let industry = item.firstPositionName;
							ctx.fillText(industry.slice(0, 12), ml + pl, mt + 120);
							ctx.stroke();
						}
						// 电话，地址
						ctx.setFontSize(18)

						if (item.mobile) {
							ctx.drawImage(icon1, ml + pl, mt + 190 - 20, 19, 20);
							ctx.fillText(item.mobile, ml + pl + 26, mt + 186);
						}
						if (item.addressInfo) {
							ctx.drawImage(icon2, ml + pl, mt + 225 - 20, 17, 20);
							ctx.fillText(item.addressInfo.slice(0, 12), ml + pl + 26, mt + 220)

							ctx.fillText(
								item.addressInfo.slice(12, 24),
								ml + pl + 26,
								mt + 220 + 26
							)

						}
						ctx.stroke();
					} else {
						const w = 500;
						const rml = 40
						ctx.textAlign = 'right';
						// ctx.drawImage(avatar, ml, mt, 290, 280);
						// 左边位置
						if(avatar.width < avatar.height){
							const aTop = (avatar.height-avatar.width)/2
							ctx.drawImage(avatar.path,0, aTop, avatar.width, avatar.width, ml, mt, 290, 280)
						}else{
							const aTop = (avatar.width-avatar.height)/2
							ctx.drawImage(avatar.path, aTop, 0, avatar.height, avatar.height, ml, mt, 290, 280)
						}
						// 水平翻转，需要先保存路径，在进行翻转，完成后还原旋转之前的路径
						// ctx.save()
						// ctx.scale(-1, 1)
						// ctx.translate( -299, 0) // 299
						// ctx.drawImage(bgCon, -188, mt, 299, 280);
						// ctx.restore()
						ctx.drawImage(bgCon, 188, mt, 299, 280);
						// logo,公司名称
						ctx.fillStyle = '#FFF9F3';
						ctx.setFontSize(14);
						if (logo) {
							ctx.fillText(companyName, w - rml, mt + 31);
							ctx.drawImage(
								logo,
								w - rml - ctx.measureText(companyName).width - 18,
								mt + 18,
								14,
								14
							);
						} else {
							ctx.fillText(companyName, w - rml, mt + 31)
						}
						ctx.stroke();
						// 名字和职位
						ctx.save()

						ctx.scale(-1, 1);
						ctx.translate(-248, 0); // 190
						ctx.drawImage(bgBlock, -253 + ml, mt + 54, 248, 88);
						ctx.restore();
						ctx.setFontSize(28)

						if (item.isAuth) {
							//实名
							ctx.fillText(item.realName, w - rml - 29, mt + 88)

							ctx.drawImage(icon3, w - rml - 23, mt + 88 - 18, 23, 20);
						} else {
							ctx.fillText(item.realName, w - rml, mt + 88);
						}
						ctx.stroke();
						if (item.firstPositionName) {
							ctx.setFontSize(16);
							let industry = item.firstPositionName.slice(0, 12)

							ctx.fillText(industry, w - rml, mt + 120);
							ctx.stroke()

						}
						// 电话，地址
						ctx.setFontSize(18);
						if (item.mobile) {
							ctx.drawImage(icon1, w - ml - rml, mt + 190 - 20, 19, 20);
							ctx.fillText(item.mobile, w - ml - rml - 8, mt + 186);
						}
						if (item.addressInfo) {
							ctx.drawImage(icon2, w - ml - rml, mt + 225 - 20, 17, 20);
							const ad1 = item.addressInfo.slice(0, 12);
							const ad2 = item.addressInfo.slice(12, 24)

							ctx.fillText(ad1, w - ml - rml - 8, mt + 220)

							ctx.fillText(ad2, w - ml - rml - 8, mt + 220 + 26);
						}
						ctx.stroke()

					}
					// 波浪
					if (tradition.name == 'newYear') {
						ctx.drawImage(bgRipple, 0, 280, 500, 120);
					} else if (tradition.name == 'newYear2') {
						ctx.drawImage(bgRipple, 0, 186, 500, 214);
					} else if (tradition.name == 'golden') {
						ctx.drawImage(bgRipple, 0, 257, 500, 143);
					} else if (tradition.name == 'turquoise') {
						ctx.drawImage(bgRipple, 0, 240, 500, 160);
					} else if (tradition.name == 'fuchsia') {
						ctx.drawImage(bgRipple, 0, 202, 500, 198);
					} else {
						ctx.drawImage(bgRipple, 0, 202, 500, 198);
					}
					ctx.draw(true, (ret) => {
						// draw方法 把以上内容画到 canvas 中。
						console.log('draw', ret);
						uni.hideLoading();
						uni.canvasToTempFilePath(
							{
								// 保存canvas为图片
								canvasId: 'firstCanvas',
								fileType: 'jpg',
								width: 500, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
								height: 400,
								complete: function (res) {
									console.log('firstCanvas == tempFilePath', res.tempFilePath);
									if (res.tempFilePath) {
										_this.shareImg = res.tempFilePath

									}
									callback(res.tempFilePath)

								}
							},
							this
						);
					});
				} catch (err) {
					console.log(err)

					callback('');
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '分享失败'
					// })
				}
			}
		},
		// 分享
		onShareAppMessage(res) {
			if(this.shareLoading) {
				return
			}
			this.shareLoading = true
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target)

			}
			return new Promise((resolve, reject) => {
				// wx.showLoading({ title: '正在请求分享数据', icon: 'none', mask: true })

				let path = `/pages/card/detail?id=${this.cardId}`

				let pattern = '';
				if (this.detail.styleId != 'STYLE_IMAGE') {
					pattern = '&pattern=' + (Number(this.pattern) + 1)

				}
				if (this.pramas.styleId) {
					const { styleId, style, organisationId } = this.pramas

					if (style == 1) {
						path =
							path +
							`&styleId=${styleId}&style=${style}&organisationId=${organisationId}${pattern}`

					} else {
						path = path + `&styleId=${styleId}&style=${style}${pattern}`;
					}
				} else {
					if (this.detail.style == 1) {
						path =
							path +
							`&styleId=${this.detail.styleId}&style=${this.detail.style}&organisationId=${this.detail.organisationId}${pattern}`;
					} else {
						path =
							path +
							`&styleId=${this.detail.styleId}&style=${this.detail.style}${pattern}`

					}
				}
				this.wxSave((url) => {
					this.shareLoading = false
					console.log({
						title: '',
						path: path, // 分享出去之后要进入的页面路径
						content: this.detail.memberProfile,
						imageUrl:this.detail.styleId == 'STYLE_IMAGE' ? this.detail.imagePhoto : url
					})

					resolve({
						title: '', //this.detail.realName
						content: this.detail.memberProfile,
						imageUrl:this.detail.styleId == 'STYLE_IMAGE' ? this.detail.imagePhoto : url, // this.detail.imagePhoto,
						path: path
					})

				});
			})

		}
	},
	// 到底加载更多动态
	onReachBottom() {
		if (this.$refs.DetailCollection) {
			this.$refs.DetailCollection.listMore()

		}
		if (this.$refs.DetailDynamic) {
			this.$refs.DetailDynamic.listMore();
		}
	}
}

</script>

<style lang="scss" scoped>
.btn-card-space {
	height: 120rpx;
}
.btn-card-fixed {
	position: fixed;
	bottom: 30rpx;
	left: 0;
	right: 0;
	height: 88rpx;
	margin: 0 40rpx;
	border-radius: 12rpx;
	z-index: 4;
}
.compony-card-space {
	height: calc(120rpx + 100rpx + env(safe-area-inset-bottom));
}
.compony-card-space .btn-card-fixed {
	bottom: calc(130rpx + env(safe-area-inset-bottom));
}
.canvas-fixed {
	position: fixed;
	// top: 0;
	// left: 0;
	top: -1000px;
	left: -1000px;
	width: 500rpx;
	height: 400rpx;
	background-color: #fff;
	z-index: 8;
}
.video-box {
	position: relative;
	width: 750rpx;
	height: 750rpx;
	background: #6d0d12 no-repeat top center;
	background-size: 750rpx 750rpx;
}
.not-wrap {
	height: calc(80vh);
}
.not-wrap .icon {
	color: red;
}
.not-wrap .tit {
	margin-top: 40rpx;
}
.not-wrap .btn {
	margin-top: 100rpx;
	width: 344rpx;
	height: 72rpx;
	overflow: hidden;
	border-radius: 44rpx;
}

.w630 {
	width: 630rpx;
}

.line {
	margin: 0 auto;
	width: 670rpx;
	height: 1rpx;
	background: var(--backgroundDivisionColor);
}
.fixed-btn {
	max-width: 570rpx;
	font-weight: 500;
}
// [data-theme='lightBlue-theme'],
// .lightBlue-theme {
// 	.bg {
// 		background: #fff
// 			url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-wrap.png') no-repeat
// 			top center;
// 		background-size: 750rpx auto;
// 	}
// }
.page-wrap {
	background: #fff
		url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-wrap.png') no-repeat;
	background-size: 750rpx auto;
	background-position: center  500rpx;
}


[data-tradition='newYear'],.newYear {
		.sign-box .sign {
			color: #D05349
		}

		.btn-group .btn-share {
			border-color: #F54435;
			background-color: #FFEEED;
			color: #F44334;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #E7473A 0%, #FC6759 98%);
		}

		.btn-scroll .bwfont {
			background: none;
			-webkit-text-fill-color: #F05704;
			color: #F05704;
		}

		.btn-scroll .btn {
			border-color: rgba(211, 54, 41, 0.70);
		}

	}

	[data-tradition='newYear2'],.newYear2 {
		.sign-box .sign {
			color: #A54C2A
		}

		.btn-group .btn-share {
			border-color: #ED7923;
			background-color: #FFF2E7;
			color: #E46921;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #E57E46 0%, #E4AB5C 98%);
		}

		.btn-scroll .bwfont {
			background: none;
			-webkit-text-fill-color: #F05704;
			color: #F05704;
		}

		.btn-scroll .btn {
			border-color: rgba(237, 121, 35, 0.70);
		}
	}

	[data-tradition='golden'],.golden {
		.sign-box .sign {
			color: #322B24
		}

		.btn-group .btn-share {
			border-color: var(--senderViewColor);
			background-color: var(--pureButtonBackOneColor);
			color: var(--senderViewColor);
		}

		.btn-group .btn-linear {
			background: linear-gradient(180deg, var(--rampButtonBackStartColor) 0%, var(--rampButtonBackEndColor) 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #ad7b54, #d8a37a);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: var(--buttonOutlineTwoColor);
		}

	}

	[data-tradition='turquoise'],.turquoise {
		.sign-box .sign {
			color: #1B1916
		}

		.btn-group .btn-share {
			border-color: #0a6f88 !important;
			background-color: #dbf4f9 !important;
			color: #0a6f88 !important;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #045570 0%, #1290a7 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #045872, #0e8299);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: #0a6f88;
		}
	}

	[data-tradition='fuchsia'],.fuchsia {
		.sign-box .sign {
			color: #781579
		}

		.btn-group .btn-share {
			border-color: #bd2bc0;
			background-color: #fce2fc;
			color: #961a98;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #840d86 0%, #cf33d1 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #770c78, #cf33d1);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: #bd2bc0;
		}
	}
</style>
